<template>
<!-- 半成品库 -->
<div class="LogisticsList" element-loading-background="rgba(255, 255, 255, 0.4)">
    <el-row class="main-el-row">
        <el-col :span="24" class="main-el-col">
          <div class="incolumn_countr">
            <div class="search-box">
                <hy-search
                ref="query"
                :searchTitle="searchTitle"
                v-model="searcher"
                :col="6"
                @search="search(1)"
                ></hy-search>
            </div>
          </div>
            <div class="main-body">
              <hy-table
                :height="autoHeightTable"
                fixed="right"
                tableIndex="序号"
                :editState="true"
                :page-small="true"
                :filter="filter"
                :button="{edit: true, look: true}"
                :buttonText="{edit: '入库', look: '详情'}"
                :titleData="titleData"
                :data="data"
                :checkbox="false"
                :pageSize="totalNum"
                :pageIndex="currentPage"
                :operation="220"
                type="multipleTable"
                @look="lookDetail"
                @edit="editDetail"
                @selectData="select"
                @limit="getPage">
              </hy-table>
            </div>
        </el-col>
    </el-row>
    <el-dialog 
      :title="dilogTitle"
      :visible.sync="centerDialogVisible"
      width="33%"
      :before-close="initSumbit"
      :modal-append-to-body="false"
      
      :close-on-click-modal="false">
      <div class="color_box"></div>
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="产品名称">
              <el-input v-model="formInline.productname" disabled placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item label="产品类别">
              <el-input  v-model="formInline.category" disabled placeholder="产品类别"></el-input>
            </el-form-item>
            <el-form-item label="库存数量">
              <el-input  v-model="formInline.inventory" disabled placeholder="库存数量"></el-input>
            </el-form-item>
            <el-form-item label="存放位置">
              <el-input v-model="formInline.address" disabled placeholder="存放位置"></el-input>
            </el-form-item>
            <el-form-item label="入库数量">
              <el-input v-model="formInline.putinnumber" placeholder="入库数量"></el-input>
            </el-form-item>
        </el-form>
      </div>
      <div class="dialog-btn-div">
        <el-button type="primary" size="medium" @click="clickByRk">确定</el-button>
        <el-button type="info" size="medium" @click="onSubmit">取消</el-button>
      </div>
    </el-dialog>
</div>
</template>

<script>
import axios from "axios";
export default {
  components: {
  },
  computed: {
    autoHeightTable () {
      return document.documentElement.scrollHeight - 251 -93
    }
  },
  data () {
      return {
          searchTitle: [
              {type: 'input', name: 'customProductName', label: '输入搜索', placeholder: '请输入成品名称', prop: 'customProductName'},
              {type: 'date2', name: 'issuanceDate', label: '输入时间', placeholder: '请选择开始时间', prop: 'issuanceDate'},
          ],
          formInline:{},
          searcher: {
            customProductName: '',
            customProductNo: '',
            issuanceDate:''
          },
          titleDataBySC: [
            {label: '产品名称', prop: 'enterpriseName'},
            {label: '产品类型', prop: 'manufactureOrg'},
            {label: '预产量', prop: 'detectionResult'}
          ],
          dataBySC:[],
          titleDataByLL:[
            {label: '物料编码', prop: 'enterpriseName'},
            {label: '物料名称', prop: 'manufactureOrg'},
            {label: '需求数量', prop: 'detectionResult'},
            {label: '出库数量', prop: 'detectionDate'},
            {label: '单位', prop: 'detectionType'},
            {label: '供应商简称', prop: 'detectionType'},
            {label: '车号', prop: 'detectionType'}
          ],
          dataByLL:[],
          //字段绑定
          titleData: [
            {label: '产品图片', prop: 'pic'},
            {label: '产品名称', prop: 'productname'},
            {label: '图纸编号', prop: 'picno'},
            {label: '库存数量', prop: 'inventory'},
            {label: '存放位置', prop: 'address'},
            {label: '创建时间', prop: 'createon'}
          ],
          data: [],  // table 接收页面的数据
          filter: {},  // 数据处理
          totalNum: 0,  // 分页参数
          currentPage: 0,  // 分页参数
          ids: [],  // 批量删除使用数据
          dilogTitle: '入库申请',
          centerDialogVisible: false

      }

  },
  created() {
    this.getData();
    this.gettotalNum();
  },
  methods: {
    search (no,apis) {   //访问数据库使用的方法
      var obj = {
        pn: this.currentPage,
        PerPageSize: 20
      };
      var objbydialog = this.formInline;
      if(apis == 'List_Warehouse'){
        var objs = JSON.stringify(obj);
      }else if(apis == 'Save_Purchase'){
        var objs = JSON.stringify(objbydialog);
      }
      var index = no
      axios(
        "/apis/WarehouseManagement.asmx/"+apis+"?index=" +
          index +
          "&jsondata=" +
          objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        if(apis == 'List_Warehouse'){
           console.log("list");
          console.log(list);
          this.data = list;

        } else if (apis == 'Save_Purchase'){
          this.$message.error(list);
        }
      });
    },
    gettotalNum () {
        axios(
        "/apis/WarehouseManagement.asmx/Count_Warehouse?index=4&jsondata={}"
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.int.__text);
        if(list<= 20) {
          this.totalNum = 1;
        } else {
          this.totalNum = Math.ceil(list/20);
        }
      });
    },
    getData() {
      this.search(4,'List_Warehouse')
    },
    clickByRk() {
      this.search(31,'Save_Purchase')
      this.initSumbit ()
    },
    onSubmit() {
      this.initSumbit ()
    },
    getPage (obj) {
      this.currentPage = 1
      this.pageSize = 1
      this.search()
    },
    // 对选择的数据处理
    select (arr) {
      this.ids = []
      for (let i = 0; i < arr.length; i++) {
        this.ids.push(arr[i].id)
      }
    },
    lookDetail (obj) {
      this.$router.push({ path: "./xqByRawmaterialstore", query: {rawmaterialno:obj.materialno,no:2}});
    },
    editDetail (obj) {
      this.formInline = obj
      this.centerDialogVisible = true
      
    },
    initSumbit () {
      this.centerDialogVisible = false
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.LogisticsList {
  width: 98%;
  margin-left: 5px;
}
.incolumn_countr {
  margin-left: 10px;
  height: 65px;
  background-color: white;
}
.dialog-btn-div{
  text-align: center
}
.search-box{
  margin-left: 10px;
  padding-top: 10px;
}
.main-body{
  margin-left: 10px;
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
</style>